<template>
	<view class="container">
		<!-- 操作条 -->
		<view class="cu-bar bg-white solid-bottom flex justify-between">
			<view class="action sub-title">
				<text class="text-xl text-bold text-darkgold">关注列表</text>
				<text class="text-ABC text-darkgold">favourite</text>
			</view>
			<!-- <view class="margin-right"><text class="cuIcon-info text-sm text-gray">左滑可取消收藏</text></view> -->
		</view>
		
		<scroll-view
			class="tui-scroll-v"
			:refresher-enabled="isLogin"
			:refresher-triggered="refreshing"
			refresher-background="#f1f1f1"
			enable-back-to-top
			:refresher-threshold="100"
			scroll-y
			@scrolltolower="loadMore"
			@refresherrefresh="onrefresh"
		>
			<!-- 未登录 -->
			<view v-if="!isLogin" class="noLoginData flex justify-center align-center">
				<tui-no-data :fixed="false" btnText="去登录" @click="goLogin">您还没有登录哦~</tui-no-data>
			</view>
			<!-- nodata -->
			<view v-if="isLogin && favList.length == 0" class="noLoginData flex justify-center align-center">
				<tui-no-data :fixed="false" imgUrl="/static/img_noorder_3x.png">暂无数据</tui-no-data>
			</view>
			
			<!-- 列表 -->
			<tui-swipe-action :actions="actions" @click="handlerButton" v-for="(item,index) in favList" :key="index" :params="item">
				<template v-slot:content>
					<view class="list-item flex align-center justify-end padding-lr solid-top solid-bottom" @tap.stop="selectDetail" :data-key="item.collectionId">
						<view class="item-image radius" :style="[{backgroundImage:'url('+ item.imageGroup +')'}]"></view>
						<view class="item-content margin-left-sm">
							<view class="text-content text-grey text-lg text-cut padding-bottom-xs"><text>{{item.collectionName}}</text></view>
							<view class="text-content text-gray text-sm text-cut"><text>{{item.detailInfo}}</text></view>
						</view>
					</view>
				</template>
			</tui-swipe-action>
			<!-- 加载更多 -->
			<view class="tui-safearea-bottom" v-if="isLogin && favList.length > 0">
				<tui-loadmore v-if="isLoading" :index="3" type="darkgold"></tui-loadmore>
				<tui-nomore v-if="noMore" backgroundColor="#f1f1f1" text="没有更多了"></tui-nomore>
			</view>
		</scroll-view>
		
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		computed: mapState(['isLogin']),
		data() {
			return {
				listTouchStart: 0,
				listTouchDirection: null,
				favList: [],
				pageNum: 1,
				pageSize: 8,
				refreshing: false,
				isLoading: false,
				loadingText: '正在加载...',
				noMore: false,
				actions: [{
					name: '取消收藏',
					color: '#fff',
					fontsize: 30, //单位rpx
					width: 90, //单位px
					background: '#FD3B31'
				}]
			};
		},
		created() {
			if (this.isLogin) {
				this.getMemberColloetionList()
			}
		},
		mounted() {
		},
		methods: {
			onrefresh() {
				if (this.refreshing) {
					return;
				}
				this.refreshing = true
				this.pageNum = 1
				this.noMore = false
				this.getMemberColloetionList("refresh")
			},
			loadMore() {
				if (!this.isLoading && !this.noMore) {
					this.isLoading = true;
					this.pageNum++
					this.fetch.request("/api/wxmini/memberColloetionList", "POST", {
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}, false, true, false, this)
					.then((res) => {
						if (res.code == 0) {
							let data = res.data
							data.rows.forEach(item => {
								this.favList.push(item)
							})
							console.log("this.favList.length:" + this.favList.length);
							console.log("data.total" + data.total);
							if (this.favList.length >= data.total) {
								this.noMore = true
								this.loadingText = '没有更多了'
							}
						}
						this.isLoading = false
					}).catch(() => {
						this.isLoading = false
					})
				}
			},
			getMemberColloetionList(type) {
				this.fetch.request("/api/wxmini/memberColloetionList", "POST", {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, false, true, false, this)
				.then((res) => {
					if (res.code == 0) {
						let data = res.data
						this.favList = []
						data.rows.forEach(item => {
							this.favList.push(item)
						})
						if (this.favList.length >= data.total) {
							this.noMore = true
							this.loadingText = '没有更多了'
						}
						if (type == "refresh") {
							setTimeout(() => {
								this.refreshing = false
							}, 500);
						}
					}
				}).catch(() => {
					this.refreshing = false
				})
			},
			handlerButton(e) {
				let item = e.item
				this.fetch.request("/api/wxmini/unLikeColloetion", "POST", {
					collectionId: item.collectionId
				}, false, true, false, this)
				.then((res) => {
					if (res.code == 0) {
						this.favList = this.favList.filter(eachItem => eachItem.memberLikeId != item.memberLikeId)
					}
					this.fetch.toast(res.msg, 1500, res.code == 0)
				}).catch(() => {})
			},
			selectDetail(e){
				let key = e.currentTarget.dataset.key;
				uni.navigateTo({
					url:'../collection/collectionDetail?uid=' + key
				})
			},
			goLogin() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
	}
	.noLoginData {
		width: 100%;
		height: 100%;
	}
	.list-item {
		width: 100%;
		height: 160rpx;
	}
	.item-image {
		height: 120rpx;
		width: 120rpx;
		background-size: cover;
		background-position: center;
		background-color: #ccc;
	}
	.item-content {
		width: calc(100% - 120rpx - 20rpx);
	}
	.tui-scroll-v {
		width: 100%;
		height: calc(100% - 200rpx - env(safe-area-inset-bottom)/2 );
	}
	.tui-safearea-bottom {
		width: 100%;
		padding-bottom: calc(env(safe-area-inset-bottom)/2);
	}
	.tui-loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 15px;
		padding-bottom: 15px;
		text-align: center;
		position: relative;
	}
	.tui-loadmore-line {
		border-bottom-width: 1rpx;
		border-bottom-style: solid;
		border-bottom-color: #e5e5e5;
		width: 320rpx;
		position: absolute;
		z-index: -1;
	}
	
	.tui-loading-more-text {
		padding-left: 8rpx;
		padding-right: 8rpx;
		font-size: 28rpx;
		line-height: 28rpx;
		background-color: #f1f1f1;
		text-align: center;
		color: #999;
	}
</style>
